<template>
	<div class="all">
		<div class="item flex m-between s-center" v-for="(item, index) in data" :key="index">
			<div class="flex s-center">
				<div>
					<iconpark-icon :name="item.icon" fill="#fff" style="font-size: 28px"></iconpark-icon>
				</div>
				<div class="m-l-10">
					<div class="t_c">{{ item.name }}</div>
					<div class="l-c">{{ item.subname }}</div>
				</div>
			</div>
			<div>
				<span class="n_t">{{ item.value }}</span
				><span class="l-c">{{ item.unit }}</span>
				<!-- name=shangsheng || xiajiang -->
				<iconpark-icon style="margin-left: 4px; font-size: 12px" name="xiajiang"></iconpark-icon>
			</div>
		</div>
	</div>
</template>

<script setup name="List">
const props = defineProps({
	data: Array
})
const getImg = (item, index) => {
	return new URL(`../../../../assets/img/rd/${item.img}.png`, import.meta.url).href
}
</script>

<style lang="scss" scoped>
.all {
	.item {
		padding: 8px 20px 8px 20px;
		height: 48px;
		border-radius: 2px;
		background: #030f27;
		box-sizing: border-box;
		border: 1px solid rgba(76, 107, 209, 0.5);
		box-shadow: inset 0px 0px 12px 0px #3468d8;
		&:not(:first-child) {
			margin-top: 10px;
		}
	}
}
.t_c {
	color: #deedff;
	text-shadow: 0px 1px 1px 0px rgba(4, 18, 42, 0.1);
}
.n_t {
	font-size: 24px;
	font-weight: bold;
	margin-right: 4px;
	background: linear-gradient(180deg, #ffffff 13%, #3b81eb 119%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	text-shadow: 0px 1px 2px 0px #071a3d;
}
.l-c {
	color: rgb(255, 255, 255, 0.5);
	font-size: 12px;
}
</style>
